{% extends "base.html" %}

{% block title %}病原体分布分析 - 滩羊疫病监测系统{% endblock %}

{% block extra_css %}
<style>
.chart-container {
    position: relative;
    height: 300px;
    margin-bottom: 1.5rem;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">病原体分布分析</h1>
        <a href="{{ url_for('pathogen.generate_report') }}" class="btn btn-primary">
            <i class="bi bi-file-earmark-text"></i> 生成分析报告
        </a>
    </div>

    <div class="row">
        <!-- 左侧图表 -->
        <div class="col-md-6">
            <!-- 类型分布 -->
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">类型分布</h5>
                    <div class="chart-container">
                        <canvas id="typeChart"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 时间趋势 -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">时间趋势</h5>
                    <div class="chart-container">
                        <canvas id="trendChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧图表 -->
        <div class="col-md-6">
            <!-- 地区分布 -->
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">地区分布</h5>
                    <div class="chart-container">
                        <canvas id="locationChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 类型-地区关系 -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">类型-地区分布</h5>
                    <div class="chart-container">
                        <canvas id="typeLocationChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
// 初始化类型分布饼图
function initTypeChart() {
    const ctx = document.getElementById('typeChart').getContext('2d');
    new Chart(ctx, {
        type: 'pie',
        data: {
            labels: [{% for type, count in type_stats %}'{{ type }}',{% endfor %}],
            datasets: [{
                data: [{% for type, count in type_stats %}{{ count }},{% endfor %}],
                backgroundColor: [
                    '#FF6384',
                    '#36A2EB',
                    '#FFCE56',
                    '#4BC0C0'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                title: {
                    display: true,
                    text: '病原体类型分布'
                }
            }
        }
    });
}

// 初始化时间趋势折线图
function initTrendChart() {
    const ctx = document.getElementById('trendChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: [{% for month, count in month_stats %}'{{ month }}',{% endfor %}],
            datasets: [{
                label: '病原体数量',
                data: [{% for month, count in month_stats %}{{ count }},{% endfor %}],
                borderColor: '#36A2EB',
                tension: 0.1,
                fill: false
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: '病原体数量趋势'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
}

// 初始化地区分布柱状图
function initLocationChart() {
    const ctx = document.getElementById('locationChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [{% for location, data in location_stats.items() %}'{{ location }}',{% endfor %}],
            datasets: [{
                label: '病原体数量',
                data: [{% for location, data in location_stats.items() %}{{ data.count }},{% endfor %}],
                backgroundColor: '#36A2EB'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: '地区分布统计'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
}

// 初始化类型-地区堆叠柱状图
function initTypeLocationChart() {
    const ctx = document.getElementById('typeLocationChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [{% for location, data in location_stats.items() %}'{{ location }}',{% endfor %}],
            datasets: [
                {
                    label: '病毒',
                    data: [{% for location, data in location_stats.items() %}{{ data.types.get('virus', 0) }},{% endfor %}],
                    backgroundColor: '#FF6384'
                },
                {
                    label: '细菌',
                    data: [{% for location, data in location_stats.items() %}{{ data.types.get('bacteria', 0) }},{% endfor %}],
                    backgroundColor: '#36A2EB'
                },
                {
                    label: '寄生虫',
                    data: [{% for location, data in location_stats.items() %}{{ data.types.get('parasite', 0) }},{% endfor %}],
                    backgroundColor: '#FFCE56'
                },
                {
                    label: '真菌',
                    data: [{% for location, data in location_stats.items() %}{{ data.types.get('fungus', 0) }},{% endfor %}],
                    backgroundColor: '#4BC0C0'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: '类型-地区分布关系'
                }
            },
            scales: {
                x: {
                    stacked: true
                },
                y: {
                    stacked: true,
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
}

// 页面加载完成后初始化所有图表
document.addEventListener('DOMContentLoaded', function() {
    initTypeChart();
    initTrendChart();
    initLocationChart();
    initTypeLocationChart();
});
</script>
{% endblock %} 